<template>
  
<z-paging>
  
  <view class="container padding-top">
    <!-- 顶部导航栏 -->
    <view
      class="flex justify-end text-sm"
      style="margin-right: 10rpx; color: #000000;"
      @click="toggleEdit"
    >
      {{ isEditing ? '完成' : '编辑' }}
    </view>

    <view class="banner radius-10 flex" >
      <CartList />
    </view>

    <!-- 底部结算栏 -->
    <view class="bottom-bar">
      <view class="select-all">
        <u-checkbox
          v-model="isAllSelected"
          @change="handleSelectAll"
          shape="circle"
          activeColor="#FF4945"
        >全选</u-checkbox>
      </view>
      <view class="settlement">
        <view class="total-price" v-if="!isEditing">
          <text>合计：</text>
          <text class="price">¥{{ totalPrice }}</text>
        </view>
        <u-button
          type="primary"
          :style="{
            margin: '0',
            background: 'linear-gradient(90deg, #FF625F 0%, #FF4945 44.5%, #FF322E 100%)',
            width: '240rpx',
            height: '80rpx',
            borderRadius: '60rpx',
          }"
          :disabled="!selectedCount"
          @click="handleSettlement"
        >
          {{ isEditing ? '删除' : `结算(${selectedCount})` }}
        </u-button>
      </view>
    </view>
  </view>
  </z-paging>
</template>

<script>
import CartList from './components/cart-list/cart-list.vue';
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  components: {
    CartList,
  },
  computed: {
    ...mapState('$cart', ['isEditing','cartItems']),
    ...mapGetters('$cart', ['isAllSelected', 'totalPrice', 'selectedCount']),
  },
  methods: {
    ...mapActions('$cart', ['toggleEdit', 'handleSettlement', 'setAllChecked', 'removeItem']),
    handleSelectAll(value) {
      this.setAllChecked(value.value);
    },
    handleSettlement() {
      if (this.isEditing) {
        const selectedItems = this.cartItems.filter((item) => item.checked);
        selectedItems.forEach((item) => {
          this.removeItem(item.id);
        });
      } else {
        this.handleSettlement();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  .icons{
    margin-left: 100rpx;
  }

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;

}

.banner {
  // 允许 banner 动态调整高度

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
background-color: #fff;
  border-radius: 10rpx;

}
.complete-text {
  font-size: 28rpx;
  color: #333;
  padding: 0 30rpx;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 90rpx;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
  

  
  .settlement {
    display: flex;
    align-items: center;
    
    .total-price {
      margin-right: 20rpx;
      font-size: 28rpx;
      
      .price {
        color: #FF4945;
        font-weight: bold;
      }
    }
    
 .u-button {
   margin: 0 !important;
   background: linear-gradient(90deg, #FF625F 0%, #FF4945 44.5%, #FF322E 100%) !important;
 }
  }
}
</style>